<template>
  <div class="d-inline-block">
    <icon-button
      v-show="!editable"
      :icon="icon"
      title="编辑"
      class="ml14"
      :activated="false"
      @click.native="handleEdit()"
    ></icon-button>
    <icon-button
      v-show="editable"
      icon="close"
      title="取消"
      class="ml14"
      :activated="false"
      @click.native="handleEditCancel()"
    ></icon-button>
    <icon-button
      v-show="editable"
      icon="complete"
      title="完成"
      class="ml14"
      :activated="false"
      @click.native="handleEditComplete"
    ></icon-button>
  </div>
</template>

<script>
export default {
  name: 'ButtonGroupEdit',

  model: {
    prop: 'edit',
    event: 'change',
  },

  props: {
    edit: Boolean,

    icon: {
      type: String,
      default: 'edit_active',
    },
  },

  computed: {
    editable: {
      get() {
        return this.edit
      },
      set(v) {
        this.$emit('change', v)
      },
    },
  },

  methods: {
    setEdit(v) {
      this.editable = v
    },

    handleEdit(v) {
      this.setEdit(true)
      this.$emit('on-edit')
    },

    handleEditCancel() {
      this.setEdit(false)
      this.$emit('on-cancel')
    },

    handleEditComplete() {
      this.setEdit(false)
      this.$emit('on-complete')
    },
  },
}
</script>

<style></style>
